<style type="text/css">
    .menuView{
        height:700px;
        width: 350px;
        border: 1px solid #e7e7eb;
        position: relative;
        box-shadow: 0px 0px 0px 1px #e7e7eb;
    }
    .menuNavBox{
        width: 100%;
        height: 60px;
        border-top:1px solid #e7e7eb;
        position: absolute;
        bottom: 0;
        z-index: 1;
    }
    .navLeft{
        height:60px;
        line-height: 60px;
        text-align: center;
        width:50px;
        border-right:1px solid darkgrey;
        float: left;
    }
    .navRight{
        float: left;
        width: 100%;
        max-width: 299px;
        overflow: hidden;
    }
    .addMenuBtn{
        height: 60px;
        border: 1px solid #07c160;
        color: #07c160;
        cursor:pointer;
        z-index: 4;
        line-height: 60px;
        text-align: center;
        /*width: 100%;*/
        max-width: 297px;
        font-size: 18px;
    }
    .form-panel{
        /*background-color: #f4f5f9;*/
        border: 1px solid #e7e7eb;
        height: 600px;
    }
    .form-panel .layui-card-header{
        line-height: 60px;
    }
    .form-panel .layui-card-header a{
        float: right;
    }
    .menuContent{
        border: 1px solid #e7e7eb;
        min-height: 300px;
    }
    .msgBox{
        display: none;
        margin-left: 0;
    }
    .jumpWeburlBox{
        display: none;
    }
    .xcxBox{
        display: none;
    }
    .menu-item{
        line-height: 60px;
        width: 98px;
        display: inline-block;
        border: 1px solid #e7e7eb;
        margin-left: -5px;
        position: relative;
        text-align: center;
        height: 60px;
    }
    .menu-item:first-child{
        margin-left: 0;
    }
    .menu-item .addSonMenuBtn{
        width: 100%;
        height:40px;
        position: absolute;
        top: -48px;
        left:0;
        right:0;
        display: none;
    }
    .menu-item .menuName{
        line-height: 60px;
        height: 60px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }
    .baseMenuformBox{
        display: none;
    }
    .menuList{
        float: left;
        /*width: calc(100% - 52px);*/
    }
    .menuSonList{
        position: absolute;
        width:100%;
        /*top: -115px;*/
        z-index: auto;
        background-color: red;
        border: 1px solid #e7e7eb;
        display: none;
    }
    .menuSonList-name{
        border-bottom: 1px solid grey;
    }
</style>
<div class="layui-card" id="wechatApp">
    <div class="layui-card-header">
        <h3>
            <strong>自定义菜单</strong>
        </h3>
    </div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="menuView">
                    <div class="menuNavBox" >
                        <div class="navLeft" >
                            <i class="layui-icon layui-icon-spread-left"></i>
                        </div>
                        <div class="menuList" >
                            <!-- <div class="menu-item">
                                 <div class="menuName">菜单名称1</div>
                                 <button type="button" class="addSonMenuBtn">+</button>
                                 <ul class="menuSonList">
                                     <li class="menuSonList-name">菜单名称son1</li>
                                     <li class="menuSonList-name">菜单名称son2</li>
                                     <li class="menuSonList-name">菜单名称son1</li>
                                 </ul>
                             </div>-->
                        </div>
                        <div class="navRight"  >
                            <div class="addMenuBtn">+添加菜单</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card form-panel baseMenuformBox ">
                    <div class="layui-card-header">
                        <span class="menuNmae">菜单名称</span>
                        <a href="javascript:;" type="button" class="delMenuBtn">删除菜单</a>
                    </div>
                    <hr class="layui-border-orange">
                    <div class="layui-card-body ">
                        <form id="cp-form" action="{:url('wechat/admin.menus/addmenus')}" class="layui-form" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">菜单名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required  lay-verify="required" placeholder="菜单名称" autocomplete="off" class="layui-input">
                                    <div class="layui-form-mid ltayui-word-aux">仅支持中英文和数字，字数不超过4个汉字或8个字母</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">菜单内容</label>
                                <div class="layui-input-block">
                                    <!--<input type="radio" name="contentType" value="1" checked lay-filter="contentType" title="发送消息" autocomplete="off" class="layui-input">-->
                                    <input type="radio" name="contentType" checked="checked" value="2"  lay-filter="contentType" title="跳转网页" autocomplete="off" class="layui-input">
                                    <!--<input type="radio" name="contentType" value="3"  lay-filter="contentType" title="跳转小程序" autocomplete="off" class="layui-input">-->
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-tab layui-tab-brief msgBox msgBox_1" lay-filter="medila" >
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" lay-id="1">图文消息</li>
                                        <li  lay-id="2">文字</li>
                                        <li  lay-id="3">图片</li>
                                        <li  lay-id="4">音频</li>
                                        <li  lay-id="5">视频</li>
                                    </ul>
                                    <div class="layui-tab-content menuContent ">
                                        <div class="layui-tab-item layui-show imgMsg ">
                                            <button type="button" class="layui-btn">从素材库选择</button>
                                            <a href="" class="layui-btn">自建图文</a>
                                            <button type="button" class="layui-btn">转载图文</button>
                                        </div>
                                        <div class="layui-tab-item">内容2</div>
                                        <div class="layui-tab-item">内容3</div>
                                        <div class="layui-tab-item">内容4</div>
                                        <div class="layui-tab-item">内容5</div>
                                    </div>
                                </div>
                                <div class="layui-card menuContent jumpWeburlBox msgBox_2">
                                    <div class="layui-card-body">
                                        <div class="layui-word-aux">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订阅者点击该子菜单会跳到以下链接</div>
                                        <label class="layui-form-label">页面地址</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="url"   placeholder="" autocomplete="off" class="layui-input">
                                            <!--<div class="layui-word-aux">
                                                <a href="">从公众号图文消息中选择</a>
                                            </div>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card menuContent xcxBox msgBox_3">
                                    <div class="layui-card-body">
                                        <div class="layui-word-aux">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订阅者点击该子菜单会跳到以下小程序</div>
                                        <label class="layui-form-label">小程序</label>
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-xs">选择小程序</button>
                                        </div>
                                    </div>
                                    <div class="layui-card-body">
                                        <label class="layui-form-label">备用网页</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="title"   placeholder="" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="layui-form-item">
                                <div class="">
                                    <input type="hidden" name="id" value="0">
                                    <!--<button class="layui-btn" lay-submit lay-filter="*">保存</button>-->
                                    <button class="layui-btn ylpush" type="button">保存发布</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
